/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef } from 'react';
import { connect } from 'umi';
import { Form, Select, Spin, Button } from 'antd';
import CommonResetButton from './_common/CommonResetButton';
import type { ConnectState } from '@/models/connect';
import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import styles from './index.less';

interface FormValueType {
  order_number: string;
  trade_number: string;
  time: any;
}

const kbType = [
  { label: '驿站', value: '1' },
  { label: '快递员', value: '2' },
];

const ChargeSustainC = (props: any) => {
  const formRef = useRef<ProFormInstance>();
  const { loading, screenSize, dispatch, AccountOperationLog } = props;
  const onFinish = async (values: FormValueType) => {
    dispatch({
      type: 'customerSearch/getAccountOperationLog',
      payload: values,
    });
  };
  const onReset = () => {
    formRef.current?.resetFields();

    dispatch({
      type: 'customerSearch/save',
      payload: {
        AccountOperationLog: [],
      },
    });
  };

  return (
    <Spin spinning={!!loading}>
      <ProForm
        formRef={formRef}
        initialValues={{ type: '2' }}
        layout={screenSize ? 'vertical' : 'inline'}
        className={styles.main}
        style={{ marginBottom: 16 }}
        onFinish={onFinish}
        submitter={{
          render: () => [
            <Button type='primary' htmlType='submit' loading={false}>
              查询
            </Button>,
            <CommonResetButton onReset={onReset} />,
          ],
        }}
      >
        <ProFormText
          name='phone'
          placeholder='请输入手机号'
          addonBefore={[
            <Form.Item name='type' style={{ margin: 0 }}>
              <Select style={{ width: 100 }} options={kbType} />
            </Form.Item>,
          ]}
          rules={[
            { required: true, message: '手机号码不能为空' },
            { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '手机号码格式错误' },
          ]}
        />
      </ProForm>
      {AccountOperationLog.length > 0 &&
        AccountOperationLog.map((item: any, index: number) => {
          return (
            <p key={index}>
              {item.create_time} {item.content}
            </p>
          );
        })}
    </Spin>
  );
};

export default connect(({ customerSearch, loading }: ConnectState) => ({
  AccountOperationLog: customerSearch.AccountOperationLog || [],
  loading: loading.effects['customerSearch/getAccountOperationLog'],
}))(React.memo(ChargeSustainC));
